<template>
	<view class="container">
		<view class="search-bar">
			<input class="search-input" placeholder="输入订单号进行搜索" v-model="searchQuery" />
			<button class="search-btn" @click="onSearch">搜索</button>
		</view>

		<view class="order-list" v-if="orders.length">
			<text class="order-count">共 {{ orders.length }} 条</text>
			<view v-for="(item, index) in orders" :key="index" class="order-item">
				<view class="order-header">
					<text class="order-no">订单号：{{ item.orderNo }}</text>
					<text class="price">{{ item.price }}元</text>
				</view>
				<view class="order-body">
					<view class="info-row">
						<text>下单用户：{{ item.userName }}</text>
						<text class="call-icon" @click="callUser(item.userPhone)">📞</text>
					</view>
					<text>预约时间：{{ item.bookingTime }}</text>
					<view class="service-status">
						<text class="service-item">服务项目：{{ item.serviceItems }}</text>
					</view>
					<view>
						<text
							:class="['status', item.orderStatus === '已完成' ? 'completed' : item.orderStatus === '待付款' ? 'pending' : 'cancelled']">
							订单状态：{{ item.orderStatus }}
						</text>
					</view>
				</view>
				<button class="detail-btn" @click="viewDetails(index)">查看详情</button>
			</view>
		</view>

		<view class="no-orders" v-else>
			<text>暂无订单</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orders: [{
						id: 1,
						orderNo: "20221010831213",
						userName: "张三丰",
						userPhone: "13800138000",
						price: 2000,
						bookingTime: "2022-10-10 11:00",
						serviceItems: "宝马X5加装轮毂、清洗车辆",
						orderStatus: "已完成"
					},
					{
						id: 2,
						orderNo: "20221010831214",
						userName: "李四",
						userPhone: "13800138001",
						price: 1500,
						bookingTime: "2022-10-11 09:00",
						serviceItems: "奔驰GLC保养",
						orderStatus: "待付款"
					},
					{
						id: 3,
						orderNo: "20221010831215",
						userName: "王五",
						userPhone: "13800138002",
						price: 2500,
						bookingTime: "2022-10-12 14:00",
						serviceItems: "奥迪Q5全车清洗",
						orderStatus: "已取消"
					}
				],
				searchQuery: ''
			};
		},
		methods: {
			//搜索
			onSearch() {
				// Placeholder for search functionality
			},
			//查看详情
			viewDetails(index) {
				console.log(index);
				const orders = this.orders;
				const order = orders[index];
				const orderJson = encodeURIComponent(JSON.stringify(order)); // 将对象转换为 JSON 字符串并进行 URL 编码
				uni.navigateTo({
					url: `/pages/syx-DingDanGuanLi/orderDetail/orderDetail?orderInfo=${orderJson}`
				});
			},
			//拨号
			callUser(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			}
		},
		onLoad() {
			// Optionally load orders here
		}
	};
</script>

<style scoped>
	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
	}

	.search-bar {
		display: flex;
		margin-bottom: 20rpx;
	}

	.search-input {
		flex: 1;
		border: 1rpx solid #ccc;
		border-radius: 8rpx;
		padding: 10rpx;
		font-size: 28rpx;
		height: 60rpx;
		/* 设置高度 */
		box-sizing: border-box;
		/* 确保内外边距不影响最终高度 */
	}

	.search-btn {
		margin-left: 10rpx;
		padding: 0 20rpx;
		/* 取消上下填充，保持一致 */
		background-color: #007aff;
		color: white;
		border-radius: 8rpx;
		font-size: 24rpx;
		height: 60rpx;
		/* 设置为与输入框一致高度 */
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		/* 确保内外边距不影响最终高度 */
	}

	.order-list {
		margin-top: 20rpx;
	}

	.order-count {
		margin-bottom: 20rpx;
		font-weight: bold;
		font-size: 32rpx;
	}

	.order-item {
		margin-bottom: 20rpx;
		padding: 20rpx;
		border: 1rpx solid #e0e0e0;
		border-radius: 10rpx;
		background-color: white;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}

	.order-header {
		display: flex;
		justify-content: space-between;
	}

	.order-no {
		font-weight: bold;
		color: #333;
		font-size: 32rpx;
	}

	.price {
		color: #ff5722;
		font-weight: bold;
		font-size: 32rpx;
	}

	.order-body {
		margin-top: 10rpx;
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.call-icon {
		cursor: pointer;
		color: #007aff;
	}

	.service-status {
		margin-top: 8rpx;
	}

	.service-item,
	.status {
		margin-top: 8rpx;
	}

	.completed {
		color: #4CAF50;
		/* Green for completed status */
	}

	.pending {
		color: #FFC107;
		/* Yellow for pending */
	}

	.cancelled {
		color: #F44336;
		/* Red for cancelled */
	}

	.detail-btn {
		width: 100%;
		background-color: #4CAF50;
		color: white;
		padding: 10rpx;
		border: none;
		border-radius: 8rpx;
		cursor: pointer;
		margin-top: 15rpx;
		font-size: 28rpx;
	}

	.no-orders {
		text-align: center;
		color: #999;
		font-size: 28rpx;
		margin-top: 30rpx;
	}
</style>